import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

export interface ITimeLineItemProps {
  children: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

const itemPropTypes = {
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
};

export interface ITimeLineProps {
  children: React.ReactNode;
  style?: React.CSSProperties;
  className?: string;
}

const propTypes = {
  children: PropTypes.node.isRequired,
};

export const TimeLineItem: React.SFC<ITimeLineItemProps> = (props: ITimeLineItemProps) => {
  const { children, className } = props;
  return (
    <li className={className} style={props.style}>
      {children}
    </li>
  );
};

TimeLineItem.propTypes = itemPropTypes;

export interface ITimeLine extends React.SFC<ITimeLineProps> {
  Item?: typeof TimeLineItem;
}

export const TimeLine: ITimeLine = (props: ITimeLineProps) => {
  const { children } = props;
  return (
    <ul className={classNames('time-line', props.className)} style={props.style}>
      {children}
    </ul>
  );
};

TimeLine.Item = TimeLineItem;
TimeLine.propTypes = propTypes;
